<template>
  <div class="common-layout" >
    <el-container>
      <el-aside width="210px" style="height: 820px;background-color: rgb(109,151,110);">
        <el-scrollbar>
          <el-menu :default-openeds="['1', '3']">

            <el-sub-menu index="1"  style="background-color: #104F3D;">
              <template #title>
                <el-icon style="color:white;">
                  <setting />
                </el-icon><p style="color: white;font-size: 18px;">用户端</p>
              </template>
              <el-menu-item-group style="background-color: rgb(109,151,110);">
                <el-menu-item index="1">
                  <RouterLink to="/students">
                    <el-button style="margin-bottom: 8px;background-color: rgb(243,201,110);color: white;width: 120px;height: 40px;font-size: 14px;border: none;border-radius: 6px;">
                      首页
                    </el-button>
                  </RouterLink>
                </el-menu-item>


              <el-menu-item index="2">
                <RouterLink to="/students/history">
                  <el-button style="margin-bottom: 8px;background-color: rgb(243,201,110);color: white;width: 120px;height: 40px;font-size: 14px;border: none;border-radius: 6px;">
                    借阅历史
                  </el-button>
                </RouterLink>
              </el-menu-item>

                <el-menu-item index="3">
                  <RouterLink to="/students/books_borrow">
                    <el-button style="margin-bottom: 8px;background-color: rgb(243,201,110);color: white;width: 120px;height: 40px;font-size: 14px;border: none;border-radius: 6px;">
                      借阅中图书
                    </el-button>
                  </RouterLink>
                </el-menu-item>

              <el-menu-item index="4">
                <RouterLink to="/students/announcement">
                  <el-button style="margin-bottom: 8px;background-color: rgb(243,201,110);color: white;width: 120px;height: 40px;font-size: 14px;border: none;border-radius: 6px;">
                   公告
                  </el-button>
                </RouterLink>
              </el-menu-item>

                <el-menu-item index="4">
                  <RouterLink to="/students/question">
                    <el-button style="margin-bottom: 8px;background-color: rgb(243,201,110);color: white;width: 120px;height: 40px;font-size: 14px;border: none;border-radius: 6px;">
                      咨询专区
                    </el-button>
                  </RouterLink>
                </el-menu-item>

                <el-menu-item index="5">
                  <RouterLink to="/students/file">
                    <el-button style="margin-bottom: 8px;background-color: rgb(243,201,110);color: white;width: 120px;height: 40px;font-size: 14px;border: none;border-radius: 6px;">
                      信件专区
                    </el-button>
                  </RouterLink>
                </el-menu-item>


              </el-menu-item-group>



            </el-sub-menu>

          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-container>

          <el-header style="height:56px;border-bottom: 1px solid black ;display: flex;flex-direction: row;background-color: rgb(109,151,110);">
              <h1 style="font-size: 25px;margin-top: 13px;margin-left: -10px;color: white;">欢迎进入图书管理系统</h1>
              <img src="../assets/logo.jpg" style="display:flex;justify-content: flex-end; margin-left: auto; width:56px;margin-top: 0px;" />

          </el-header>

        <el-main>
          <RouterView></RouterView>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "StudentsView"
}
</script>

<style scoped>
.el-menu-item{
    height: 60px;
}
</style>